<template>
  <div class="script-status-container">
    <el-card class="script-status-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">情报记录脚本状态</span>
          <el-icon @click="refreshStatus" class="refresh-icon"
            ><Refresh
          /></el-icon>
        </div>
      </template>

      <div class="script-list" v-loading="loading">
        <div v-for="script in scriptList" :key="script.id" class="script-item">
          <div class="script-header">
            <span class="script-name">{{ script.name }}</span>
            <el-tag
              :type="getStatusType(script.status)"
              size="small"
              class="status-tag"
            >
              {{ getStatusText(script.status) }}
            </el-tag>
          </div>
          <div class="script-detail">
            上次运行: {{ formatTime(script.last_run_time) }} 获取漏洞:
            <span class="script-count">{{ script.today_count || 0 }}</span
            >个
          </div>
        </div>

        <el-empty
          v-if="!scriptList.length && !loading"
          description="暂无脚本数据"
        />
      </div>
    </el-card>

    <el-card class="latest-vulns-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">最新漏洞信息</span>
          <router-link to="/vulnerability/list">
            <el-button type="primary" class="more-btn">查看更多 >></el-button>
          </router-link>
        </div>
      </template>

      <div class="vuln-list" v-loading="vulnLoading">
        <el-scrollbar height="250px">
          <div v-for="vuln in latestVulns" :key="vuln.id" class="vuln-item">
            <div class="vuln-title" :title="vuln.title"></div>
            <div class="vuln-info">
              <div class="vuln-level">
                <el-tag size="small" :class="getLevelType(vuln.level)">{{
                  vuln.level
                }}</el-tag>
                <span class="vuln-level-title">{{ vuln.title }}</span>
              </div>
              <span class="vuln-time">{{ formatTime(vuln.publish_time) }}</span>
            </div>
          </div>
        </el-scrollbar>

        <el-empty
          v-if="!latestVulns.length && !vulnLoading"
          description="暂无最新漏洞"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
/**
 * 情报收录脚本状态组件
 * @module ScriptStatus
 * @description 用于展示情报收录脚本的运行状态和最新漏洞信息
 */
import { ref, onMounted } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { formatDate } from "@/utils/index";
import { getScriptList } from "@/api/intelligence";
import { getVulnerabilityList } from "@/api/vulnerability";
// 脚本列表
const scriptList = ref([]);
// 最新漏洞列表
const latestVulns = ref([]);
// 加载状态
const loading = ref(false);
const vulnLoading = ref(false);
// 漏洞危害等级数据
const levelData = ref([]);

// 获取脚本状态
const fetchScriptStatus = async () => {
  loading.value = true;
  try {
    const queryParams = reactive({
      page_index: 1,
      page_size: 3,
    });
    const response = await getScriptList(queryParams);
    scriptList.value = response.data.map((item) => {
      return {
        id: item.id,
        name: item.name,
        status: item.start, // 1: 运行中, 0: 已停止, -1: 异常
        last_run_time: item.update_time,
        today_count: item.new_count,
      };
    });
    loading.value = false;
  } catch (error) {
    console.error("获取脚本状态失败", error);
    ElMessage.error("获取脚本状态失败");
    loading.value = false;
  }
};

// 获取最新漏洞
const fetchLatestVulns = async () => {
  vulnLoading.value = true;
  try {
    const params = {
      page_index: 1,
      page_size: 4,
    };
    const res = await getVulnerabilityList(params);
    latestVulns.value = res.data || [];
    vulnLoading.value = false;
  } catch (error) {
    console.error("获取最新漏洞失败", error);
    ElMessage.error("获取最新漏洞失败");
    vulnLoading.value = false;
  }
};

// 刷新状态
const refreshStatus = () => {
  fetchScriptStatus();
  fetchLatestVulns();
};

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    1: "success",
    0: "danger",
    "-1": "danger",
  };
  return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: "进行中",
    0: "已停止",
    "-1": "异常",
  };
  return statusMap[status] || "未知";
};

// 获取危害等级类型
const getLevelType = (level) => {
  const levelMap = {
    严重: "serious-level",
    高危: "high-level",
    中危: "medium-level",
    低危: "low-level",
  };
  return levelMap[level] || "";
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return "无数据";
  return formatDate(new Date(timestamp), "YYYY年MM月DD日 HH:mm");
};

// 页面加载时获取数据
onMounted(() => {
  fetchScriptStatus();
  fetchLatestVulns();
});
</script>

<style lang="scss" scoped>
.script-status-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  .card-header {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .refresh-icon {
      cursor: pointer;
      font-size: 20px;
      color: #007aff;
    }
    .card-title {
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 400;
    }

    .more-btn {
      height: 28px;
      padding: 0 10px;
      font-size: 12px;
      background: #007aff;
    }
  }
  :deep(.el-card__header) {
    border-bottom: none;
  }
  .script-status-card {
    // margin-bottom: 20px;
    flex: 1;
    .script-list {
      min-height: 150px;
      padding: 0;

      .script-item {
        display: flex;
        flex-direction: column;
        padding: 15px;
        background-color: #e7eaf0;
        border-radius: 8px;

        &:last-child {
          border-bottom: none;
        }

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        .script-header {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .script-name {
            font-size: 14px;
            font-weight: 500;
            margin-right: 10px;
            color: #474748;
          }

          .status-tag {
            font-size: 12px;
            padding: 0 8px;
            height: 24px;
            line-height: 22px;
            border-radius: 2px;
            font-weight: normal;

            &.el-tag--success {
              background-color: #229f7b;
              border-color: #229f7b;
              color: #fff;
            }

            &.el-tag--danger {
              background-color: #bd2f2f;
              border-color: #bd2f2f;
              color: #fff;
            }
          }
        }
        .script-detail {
          color: #909399;
          font-size: 12px;
          line-height: 1.5;
          .script-count {
            color: #7d7e80;
            font-size: 16px;
          }
        }
      }
    }
    :deep(.el-card__body) {
      padding-top: 0;
    }
  }

  .latest-vulns-card {
    flex: 1;
    .vuln-list {
      min-height: 250px;

      .vuln-item {
        padding: 10px 5px;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
          border-bottom: none;
        }

        .vuln-title {
          font-size: 14px;
          margin-bottom: 8px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .vuln-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          :deep(.el-tag) {
            margin-right: 10px;
            padding: 15px 15px;
          }
          .high-level {
            background-color: #f9ebd1;
            border-color: #f9ebd1;
            color: #f0881f;
          }
          .serious-level {
            background-color: #f8d6d6;
            border-color: #f8d6d6;
            color: #dc3232;
          }
          .medium-level {
            background-color: #f8f0d2;
            border-color: #f8f0d2;
            color: #b7941f;
          }
          .low-level {
            background-color: #d4eff7;
            border-color: #d4eff7;
            color: #26acd9;
          }
          .vuln-level-title {
            font-size: 14px;
            color: #5c5c5c;
          }
          .vuln-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
    :deep(.el-card__body) {
      padding-top: 0;
    }
  }
}

.dark {
  .script-item {
    background-color: #273b5a !important;
  }
  .script-name {
    color: #c6ccd4 !important;
  }
  .script-count {
    color: #0276f4 !important;
  }
  .vuln-level-title {
    color: #d9dcdf !important;
  }
  .high-level {
    background-color: transparent !important;
    box-shadow: 0 0 5px 2px #7f5e30 !important;
  }
  .serious-level {
    background-color: transparent !important;
    box-shadow: 0 0 5px 2px #dc3232 !important;
  }
  .medium-level {
    background-color: transparent !important;
    box-shadow: 0 0 5px 2px #b7941f !important;
  }
  .low-level {
    background-color: transparent !important;
    box-shadow: 0 0 5px 2px #26acd9 !important;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .script-status-container {
    .script-item {
      flex-direction: column;

      .script-detail {
        margin-top: 10px;
      }
    }
  }
}
</style>
